<template>
  <div>
    <headers title="搜索"></headers>
    <van-search
      v-model="title"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <div class="item" v-if="list.length > 0">
      <van-card
        v-for="(v, i) in list"
        :key="i"
        :num="v.goods_number"
        :price="v.goods_price"
        :title="v.goods_name"
        :thumb="
          v.goods_small_logo
            ? v.goods_small_logo
            : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'
        "
        @click="ondetail(v.goods_id)"
      />
    </div>
    <div class="item">
      <van-empty description="暂无数据" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { searchApi } from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import _ from "lodash";
const router = useRouter();
const route = useRoute();
import headers from "@/components/header.vue";

const title = ref(route.query.name);

const list = ref([]);
const searchFun = () => {
  searchApi(title.value).then((res) => {
    list.value = res.data.message.goods;
  });
};
searchFun();

watch(
  title,
  _.debounce(() => {
    searchFun();
  })
);
const ondetail=(goods_id)=>{
    router.push({path:'/detail',query:{goods_id:goods_id}})
}
</script>

<style lang="scss" scoped></style>
